<template>
  <div>
    <van-icon name="arrow-left" class="na" size="20" @click="$router.go(-1)" />
    <div class="i">发布房源</div>
    <div class="fang">房源信息</div>
    <div class="xiao">
      <div>小区名称</div>
      <input type="text" value="请输入小区名称" />
    </div>
    <div class="zu">
      <div>租金</div>
      <input type="text" value="请输入租金/月" />
      <span>￥/月</span>
    </div>
    <div class="jian">
      <div>建筑面积</div>
      <input type="text" value="请输入建筑面积" />
      <span>m²</span>
    </div>
    <div class="h">
      <div>户型</div>
      <input type="text" value="请选择" />
    </div>
    <div class="suo">
      <div>所在楼层</div>
      <input type="text" value="请选择" />
    </div>
    <div class="chao">
      <div>朝向</div>
      <input type="text" value="请选择" />
    </div>
    <div class="wu">房屋标题</div>
    <div class="tu">
      <input type="text" value="请输入标题（例如：整租 小区名2室 5000元）" />
      <div>房屋图像</div>
    </div>
    <div class="pei">
      <div></div>
      <div class="zhi">房屋配置</div>
    </div>
    <van-grid :column-num="5">
      <van-grid-item icon="&#xe643;" text="衣柜" > </van-grid>
      <van-grid-item icon="el-icon-delete-solid" text="洗衣机" />
      <van-grid-item icon="photo-o" text="空调" />
      <van-grid-item icon="photo-o" text="天然气" />
      <van-grid-item icon="photo-o" text="冰箱" />
      <van-grid-item icon="photo-o" text="暖气" />
      <van-grid-item icon="photo-o" text="电视" />
      <van-grid-item icon="photo-o" text="热水器" />
      <van-grid-item icon="photo-o" text="宽带" />
      <van-grid-item icon="photo-o" text="沙发" />
    </van-grid>
    <div class="kong"></div>
    <div class="hou">
      <div>房屋描述</div>
      <input type="text" value="请输入房屋描述信息" />
    </div>
    <div class="wei">
      <div class="qu">取消</div>
      <button class="ti">提交</button>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style scoped lang="less">
.na {
  color: #fff;
  position: absolute;
  top: 13px;
  left: 25px;
}
.i {
  background-color: rgba(33, 185, 122);
  color: #fff;
  font-size: 22px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}
.fang {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  color: rgba(33, 185, 122);
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
}
.xiao {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;

  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    text-align: right;
    color: rgba(151, 151, 151);
  }
}
.zu {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    padding-left: 20px;
    text-align: left;
    color: rgba(151, 151, 151);
  }
  span {
    color: rgba(151, 151, 151);
  }
}
.jian {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    padding-left: 20px;
    text-align: left;
    color: rgba(151, 151, 151);
  }
  span {
    color: rgba(151, 151, 151);
  }
}
.h {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;

  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    text-align: right;
    color: rgba(151, 151, 151);
  }
}
.suo {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;

  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    text-align: right;
    color: rgba(151, 151, 151);
  }
}
.chao {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  display: flex;

  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  div {
    margin: 0;
    color: rgba(127, 102, 151);
  }
  input {
    flex: 1;
    border: none;
    text-align: right;
    color: rgba(151, 151, 151);
  }
}
.wu {
  height: 40px;
  line-height: 40px;
  padding: 15px 15px 9px;
  color: rgba(127, 102, 151);
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
}
.tu {
  padding: 15px 15px 9px;
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  input {
    height: 44px;
    line-height: 44px;
    color: rgba(151, 151, 151);
    border: none;
    width: 100%;
  }
  div {
    height: 40px;
    line-height: 40px;
    color: rgba(127, 102, 151);
  }
}
.pei {
  height: 150px;
  padding: 15px 15px 9px;
  border-bottom: 1px solid rgba(80, 79, 79, 0.323);
  .zhi {
    height: 40px;
    line-height: 40px;
    color: rgba(127, 102, 151);
  }
}
.kong {
  height: 20px;
  background-color: rgba(246, 245, 246);
}
.hou {
  padding: 15px 15px 9px;
  margin-top: 15px;
  div {
    color: rgba(127, 102, 151);
    height: 40px;
    line-height: 40px;
  }
  input {
    height: 128px;
    color: rgba(151, 151, 151);
  }
}
.wei {
  height: 45px;
  display: flex;
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 999;
  .qu {
    // width: 50px;
    // flex: 1;
    width: 50%;
  //  width: 183px;
    color: rgba(33, 185, 122);
    background-color: rgba(255, 255, 255);
    text-align: center;
    line-height: 45px;
  }
  .ti {
    border: none;
    line-height: 45px;
    text-align: center;
    // width: 195px;
      // flex: 1;
      width: 50%;
    color: rgba(255, 255, 255);
    background-color: rgba(33, 185, 122);
  }
}
</style>
